<template>
  <div class="fixed-button">
    <div class="undercarriage" v-if="off_shelf_status==1">商品已下架~</div>
    <div class="fixed-btn-wrap" :class="off_shelf_status==1?'off-shelf-status':''">
      <!-- 积分兑换商品详情 -->
      <div class="fixed-wrap" v-if="exchange">
        <div class="open_store_gift_btn" id="open_store_gift_btn">
          <div class="fixed-wrap-item" v-if="detailAll.item_detail && detailAll.item_detail.num>0" >
            <!--左边图标按钮-->
            <icon-btn ref="iconBtn" :hideCar="true" :hideHome="true" :hideShare="true" :hideExchangeIcon="false" :detailAll="detailAll"/>

            <div class="fixed-wrap-item-btn">
              <div class="fixed-wrap-item-btn-app">
                <div class="btn-item cart-gra-btn" @click="handleOpenSkuPoint(detailAll.item_detail,'addCart')">加入兑换清单</div>
                <div class="btn-item buy-gra-btn" @click="handleOpenSkuPoint(detailAll.item_detail,'buyNow')">立即兑换</div>
              </div>
            </div>
          </div>
          <div class="fixed-wrap-item" v-else>
            <finish-btn msgInfo="商品已兑完"></finish-btn>
          </div>
        </div>
      </div>
      <!-- 在线课程 -->
      <div class="fixed-wrap" v-else-if="itemCourse">
        <div class="course-btn">
          <div class="fixed-wrap-item">
            <div class="fixed-wrap-item-btn">
              <div class="fixed-wrap-item-btn-app">
                <div class="btn-item buy-gra-btn" @click="linkTo(detailAll.link)">购买专栏</div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 开店礼包 -->
      <div class="fixed-wrap" v-else-if="detailAll.user_need_open_store_gift==1">
        <div class="open_store_gift_btn" id="open_store_gift_btn">
          <div class="fixed-wrap-item" v-if="detailAll.item_detail && detailAll.item_detail.num>0" >
            <div class="fixed-wrap-item-btn">
              <div class="fixed-wrap-item-btn-app">
                <div class="btn-item buy-gra-btn" :style="detailAll.shopping_buy_color!='rgba(254,80,0,1)'?{background:detailAll.shopping_buy_color}:{}" @click="handleOpenSkuDialog(detailAll.item_detail,'buyNow')">{{detailAll.is_prescription_drug ? '加入需求清单' : detailAll.buy_now_alias}}</div>
              </div>
            </div>
          </div>
          <div class="fixed-wrap-item" v-else>
            <finish-btn msgInfo="商品已售罄"></finish-btn>
          </div>
        </div>
      </div>
      <!-- 定制 野火教育 start -->
      <div class="fixed-wrap" v-else-if="detailAll.wild_fire_education">
        <dz-yhjy-btn :detailAll="detailAll"/>
      </div>
      <!-- 定制 野火教育 ent -->
      <div class="fixed-wrap" v-else>
        <!--活动商品-->
        <!--秒杀的按钮-->
        <div class="MiaoS" v-if="activityType == '1'">
          <!--秒杀活动未开始-->
          <div class="fixed-wrap-item" v-if="detailAll.miao.status!=2 && detailAll.miao.other_status!=1">
            <refresh-btn :detailAll="detailAll"/>
          </div>

          <!--秒杀活动进行中-->
          <div class="fixed-wrap-item" v-if="detailAll.miao.status!=2 && detailAll.miao.other_status==1">
            <!--左边图标按钮-->
            <icon-btn :detailAll="detailAll"/>
            <div class="fixed-wrap-item-btn">
              <div class="fixed-wrap-item-btn-app">
                <div class="btn-item cart-gra-btn" v-if="!detailAll.is_cart_prohibit&&detailAll.is_show_car==1 && !detailAll.is_prescription_drug" @click="handleOpenSkuDialog(detailAll.item_detail,'addCart')">加入购物车</div>
                <div class="btn-item buy-gra-btn" @click="handleOpenSkuDialog(detailAll.item_detail,'buyNow')">{{ detailAll.is_prescription_drug ? '加入需求清单' : '立即购买' }}</div>
              </div>
            </div>
          </div>

          <!--秒杀活动已结束-->
          <div class="fixed-wrap-item" v-if="detailAll.miao.status==2">
            <finish-btn msgInfo="秒杀已结束"></finish-btn>
          </div>
        </div>

        <!--限时打折按钮-->
        <div class="XianSZ" v-else-if="activityType == '2'">
          <!--限时打折活动未开始-->
          <div class="fixed-wrap-item" v-if="detailAll.item_discount.status!=2 && detailAll.item_discount.other_status!=1">
            <refresh-btn :detailAll="detailAll"/>
          </div>

          <!--限时打折活动进行中-->
          <div class="fixed-wrap-item" v-if="detailAll.item_discount.status!=2 && detailAll.item_discount.other_status==1">
            <!--左边图标按钮-->
            <icon-btn :detailAll="detailAll"/>
            <div class="fixed-wrap-item-btn">
              <div class="fixed-wrap-item-btn-app">
                <div class="btn-item cart-gra-btn" :style="!detailAll.is_cart_prohibit&&detailAll.shopping_cart_color?{background:detailAll.shopping_cart_color}:{}" @click="handleOpenSkuDialog(detailAll.item_detail,'addCart')" v-if="!detailAll.is_prescription_drug">加入购物车</div>
                <div class="btn-item buy-gra-btn" :style="detailAll.shopping_buy_color?{background:detailAll.shopping_buy_color}:{}" @click="handleOpenSkuDialog(detailAll.item_detail,'buyNow')">{{ detailAll.is_prescription_drug ? '加入需求清单' : detailAll.buy_now_alias }}</div>
              </div>
            </div>
          </div>

          <!--限时打折活动已结束-->
          <div class="fixed-wrap-item" v-if="detailAll.item_discount.status==2">
            <finish-btn msgInfo="限时打折已结束"></finish-btn>
          </div>

        </div>

        <!--拼团-->
        <div class="PingT" v-else-if="detailAll.isGroup">

          <!--大团小团进行中-->
          <div class="fixed-wrap-item" v-if="detailAll.info.aggregation_type!=2">
            <icon-btn :hideCar="true" :detailAll="detailAll"/>
            <div class="fixed-wrap-item-btn">
              <div class="fixed-wrap-item-btn-app">
                <!--    十人团定制  只显示参与拼团  -->
                <template v-if="!detailAll.is_ten_group">
                  <div class="btn-item single-buy-gra-btn to-detail" v-if="detailAll.is_check_dhs==1" @click="linkTo(detailAll.item_link+'&no_group=0')">
                    <div class="price" v-html="scaleGoodsPriceFn(detailAll.info.itemInfo.price)">
                    </div>
                    <div class="text">单独购买</div>
                  </div>
                  <div class="btn-item single-buy-gra-btn" v-else @click="handleOpenSkuDialog(detailAll.item_detail)">
                    <div class="price" v-html="scaleGoodsPriceFn(detailAll.info.itemInfo.price)">
                    </div>
                    <div class="text">单独购买</div>
                  </div>
                  <div class="btn-item buy-gra-btn" v-if="detailAll.info.start_time<=nowTime" @click="handleOpenSkuGroup(detailAll.item_detail)">
                    <div class="price" v-html="scaleGoodsPriceFn(detailAll.info.price)">
                    </div>
                    <div class="text">拼团</div>
                  </div>
                </template>
                <template v-else>
                  <div class="btn-item buy-gra-btn" @click="handleOpenSkuGroup(detailAll.item_detail)">
                    <div class="price" v-html="scaleGoodsPriceFn(detailAll.info.price)">
                    </div>
                    <div class="text">参与拼团</div>
                  </div>
                </template>

              </div>
            </div>
          </div>
          <!-- 阶梯团 -->
          <div class="fixed-wrap-item" v-else>
            <div class="fixed-wrap-item-btn">
              <!--阶梯团未开始-->
              <div class="fixed-wrap-item-btn-app" v-if="detailAll.info.start_time>nowTime" >
                <div class="btn-item buy-gra-btn" @click="handleOpenSkuDialog(detailAll.item_detail)">
                  <div class="price" v-html="scaleGoodsPriceFn(detailAll.info.itemInfo.price)">
                  </div>
                  <div class="text">单独购买</div>
                </div>
                <div class="btn-item buy-gra-btn only" @click="handleOpenSkuGroup(detailAll.item_detail)">立即参团</div>
              </div>
              <div class="fixed-wrap-item-btn-app" v-else>
                <div class="btn-item buy-gra-btn only" @click="handleOpenSkuGroup(detailAll.item_detail)">立即参团</div>
              </div>
            </div>
          </div>

        </div>

        <!--砍价-->
        <div class="KanJ" v-else-if="activityType == '3'">
          <!--砍价活动未开始-->
          <div class="fixed-wrap-item" v-if="detailAll.item_bargin.status!=2 && detailAll.item_bargin.other_status!=1">
            <refresh-btn :detailAll="detailAll"/>
          </div>

          <!--砍价活动进行中-->
          <div class="fixed-wrap-item" v-if="detailAll.item_bargin.status!=2 && detailAll.item_bargin.other_status==1">
            <!--左边图标按钮-->
            <icon-btn :hideHome="true" :hideShare="true" :detailAll="detailAll"/>
            <div class="fixed-wrap-item-btn">
              <div class="fixed-wrap-item-btn-app">
                <div class="btn-item kan-btn" :class="detailAll.item_bargin.is_limit_price==1?'kan-price':''" @click="JumpName('item-invite-bargain',{id:detailAll.item_detail.item_id})">
                  <span class="kan-btn-txt">邀请砍价</span>
                  <span class="kan-btn-txt" v-if="detailAll.item_bargin.is_limit_price==1">最低砍至{{detailAll.item_bargin.limit_price}}元</span>
                </div>
                <div class="btn-item cart-gra-btn" @click="handleOpenSkuDialog(detailAll.item_detail,'addCart')" v-if="!detailAll.is_cart_prohibit&&!detailAll.is_prescription_drug">加入购物车</div>
                <div class="btn-item buy-gra-btn" @click="handleOpenSkuDialog(detailAll.item_detail,'buyNow')">{{ detailAll.is_prescription_drug ? '加入需求清单' : '立即购买' }}</div>
              </div>
            </div>
          </div>

          <!--砍价活动已结束-->
          <div class="fixed-wrap-item" v-if="detailAll.item_bargin.status==2">
            <finish-btn msgInfo="砍价已结束"></finish-btn>
          </div>
        </div>

        <!--试用-->
        <div class="ShiY" v-else-if="activityType == '4'">
          <!--试用活动未开始-->
          <div class="fixed-wrap-item" v-if="detailAll.item_try.status!=2 && detailAll.item_try.other_status!=1">
            <refresh-btn :detailAll="detailAll"/>
          </div>

          <!--试用活动进行中-->
          <div class="fixed-wrap-item" v-if="detailAll.item_try.status!=2 && detailAll.item_try.other_status==1">
            <!--左边图标按钮-->
            <icon-btn :detailAll="detailAll"/>
            <div class="fixed-wrap-item-btn">
              <div class="fixed-wrap-item-btn-app">
                <div class="btn-item" v-if="!detailAll.item_try.is_apply" @click="handleOpenSkuDialog(detailAll.item_detail)">申请免费试用</div>
                <div class="btn-item" v-else>您已提交申请</div>
              </div>
            </div>
          </div>

          <!--试用活动已结束-->
          <div class="fixed-wrap-item" v-if="detailAll.item_try.status==2">
            <finish-btn msgInfo="试用活动已结束"></finish-btn>
          </div>
        </div>

        <!--预售-->
        <div class="YuS" v-else-if="activityType == '5'">
          <!--预售活动进行中-->
          <div class="fixed-wrap-item">
            <!--左边图标按钮-->
            <icon-btn :hideHome="true" :detailAll="detailAll"/>
            <!-- 云仓礼包商品不支持加入购物车  is_yuncang_gift 0 非云仓礼包 1 云仓礼包-->
            <div class="fixed-wrap-item-btn">
              <div class="fixed-wrap-item-btn-app">
                <div class="btn-item cart-gra-btn" @click="handleOpenSkuDialog(detailAll.item_detail,'buyNow')">
                  <span class="btn-presell-top">{{detailAll.presale_info.show_end_time}}结束</span>
                  <span class="btn-presell-bottom" v-if="detailAll.presale_info.show_start_delivery_time && detailAll.presale_info.show_end_delivery_time">{{detailAll.presale_info.show_start_delivery_time}}-{{detailAll.presale_info.show_end_delivery_time}}发货</span>
                  <span class="btn-presell-bottom" v-if="detailAll.presale_info.show_start_delivery_time && !detailAll.presale_info.show_end_delivery_time">{{detailAll.presale_info.show_start_delivery_time}}开始发货</span>
                  <span class="btn-presell-bottom" v-if="!detailAll.presale_info.show_start_delivery_time && detailAll.presale_info.show_end_delivery_time">最晚{{detailAll.presale_info.show_end_delivery_time}}发货</span>
                </div>
                <div class="btn-item buy-gra-btn" @click="handleOpenSkuDialog(detailAll.item_detail,'buyNow')">立即支付定金</div>
              </div>
            </div>
          </div>
        </div>

        <!--订货模式-->
        <div class="acitivity6" v-else-if="activityType == '6'">
          <div class="fixed-wrap-item" v-if="detailAll.item_detail && detailAll.item_detail.num>0">
            <!--左边图标按钮-->
            <icon-btn :detailAll="detailAll"/>
            <div class="fixed-wrap-item-btn">
              <div class="fixed-wrap-item-btn-app" v-if="detailAll.is_yuncang_gift == 1">
                <div class="btn-item buy-gra-btn" :style="detailAll.shopping_buy_color?{background:detailAll.shopping_buy_color}:{}" @click="handleOpenSkuDialog(detailAll.item_detail,'buyNow')">{{detailAll.is_prescription_drug ? '加入需求清单' : detailAll.buy_now_alias}}</div>
              </div>
              <div class="fixed-wrap-item-btn-app" v-else>
                <!-- 定制 得炫 组合商品 不可以加入购物车 -->
                <div class="btn-item cart-gra-btn"  v-if="!detailAll.is_cart_prohibit&&!dzWindShow && !(detailAll.is_hzdx_dhs_dz && detailAll.package_item_list && detailAll.package_item_list.length>0) && !detailAll.is_prescription_drug" :style="detailAll.shopping_cart_color?{background:detailAll.shopping_cart_color}:{}" @click="handleOpenSkuDialog(detailAll.item_detail,'addCart')">加入购物车</div>
                <div class="btn-item buy-gra-btn" :style="detailAll.shopping_buy_color?{background:detailAll.shopping_buy_color}:{}" @click="handleOpenSkuDialog(detailAll.item_detail,'buyNow')">{{ detailAll.is_prescription_drug ? '加入需求清单' : detailAll.buy_now_alias }}</div>
              </div>
            </div>
          </div>

          <!--商品已售罄-->
          <div class="fixed-wrap-item" v-else>
            <finish-btn msgInfo="商品已售罄"></finish-btn>
          </div>
        </div>

        <!--周期购-->
        <div class="ZhouQG" v-else-if="activityType == '7'">

          <!--周期购活动进行中-->
          <div class="fixed-wrap-item" v-if="detailAll.item_detail && detailAll.item_detail.num>0">
            <!--左边图标按钮-->
            <icon-btn :detailAll="detailAll"/>
            <div class="fixed-wrap-item-btn">
              <div class="fixed-wrap-item-btn-app">
              <div class="btn-item zhouq-btn" @click="handleOpenSkuDialog(detailAll.item_detail,'buyNow')">{{ detailAll.prescription_drugs ? '加入需求清单':'立即购买' }}</div>
              </div>
            </div>
          </div>

          <!--周期购活动已结束-->
          <div class="fixed-wrap-item" v-else>
            <finish-btn msgInfo="商品已售罄"></finish-btn>
          </div>
        </div>

        <!--内购-->
        <div class="NeiGou" v-else-if="activityType == '8'">

          <!--内购活动进行中-->
          <div class="fixed-wrap-item" v-if="detailAll.item_detail && detailAll.item_detail.num>0">
            <!--左边图标按钮-->
            <icon-btn :detailAll="detailAll"/>
            <div class="fixed-wrap-item-btn">
              <div class="fixed-wrap-item-btn-app">
                <div class="btn-item buy-gra-btn" :style="detailAll.shopping_buy_color?{background:detailAll.shopping_buy_color}:{}" @click="handleOpenSkuDialog(detailAll.item_detail,'buyNow')">{{detailAll.is_prescription_drug ? '加入需求清单' : detailAll.buy_now_alias}}</div>
              </div>
            </div>
          </div>

          <!--内购活动已结束-->
          <div class="fixed-wrap-item" v-else>
            <finish-btn msgInfo="商品已售罄"></finish-btn>
          </div>
        </div>

        <!--一般商品-->
        <div class="Common" v-else>
          <div class="fixed-wrap-item" v-if="detailAll.item_detail.num>0">
            <!--左边图标按钮-->
            <icon-btn :detailAll="detailAll"/>
            <!-- 云仓礼包商品不支持加入购物车  is_yuncang_gift 0 非云仓礼包 1 云仓礼包-->
            <div class="fixed-wrap-item-btn">
              <div class="fixed-wrap-item-btn-app" v-if="detailAll.is_yuncang_gift == 1">
                <div class="btn-item buy-gra-btn" :style="detailAll.shopping_buy_color?{background:detailAll.shopping_buy_color}:{}" @click="handleOpenSkuDialog(detailAll.item_detail,'buyNow')">{{detailAll.is_prescription_drug ? '加入需求清单' : detailAll.buy_now_alias}}</div>
              </div>
              <div class="fixed-wrap-item-btn-app" v-else>
                <!-- 定制 得炫 组合商品 不可以加入购物车 -->
                <template v-if="!(detailAll.is_hzdx_dhs_dz && detailAll.package_item_list && detailAll.package_item_list.length>0)">
                <div class="btn-item send-gift-btn" v-if="detailAll.is_send_gift==1 && !detailAll.is_prescription_drug" @click="handleOpenSkuDialog(detailAll.item_detail,'sendGift')">我要送人</div>
                  <!--      需求名字不清晰 加急的需求 隐藏加入购物车  与处方药冲突，以加急需求优先级大 进行判断       -->
                  <!-- 定制 赠品 绑定备注系列之后不允许加入购物车 -->
                  <template v-if="!detailAll.is_cart_prohibit&&!detailAll.hide_cart_btn &&( (detailAll.has_bind_series && detailAll.has_bind_series == 0)|| !detailAll.has_bind_series)">
                  <div class="btn-item cart-gra-btn" :style="detailAll.shopping_cart_color?{background:detailAll.shopping_cart_color}:{}" @click="handleOpenSkuDialog(detailAll.item_detail,'addCart')" v-if="!detailAll.is_prescription_drug">加入购物车</div>
                </template>
                </template>
                <!--      需求名字不清晰 加急的需求 修改按钮文案       -->
                <div v-if="!detailAll.buy_btn_name" class="btn-item buy-gra-btn" :style="detailAll.shopping_buy_color?{background:detailAll.shopping_buy_color}:{}" @click="handleOpenSkuDialog(detailAll.item_detail,'buyNow')">{{detailAll.is_prescription_drug ? '加入需求清单' : detailAll.buy_now_alias}}</div>
                <div v-if="detailAll.buy_btn_name" class="btn-item buy-gra-btn" :style="detailAll.shopping_buy_color?{background:detailAll.shopping_buy_color}:{}" @click="handleOpenSkuDialog(detailAll.item_detail,'buyNow')">{{detailAll.buy_btn_name}}</div>

              </div>
            </div>
          </div>

          <!--商品已售罄-->
          <div class="fixed-wrap-item" v-else>
            <finish-btn msgInfo="商品已售罄"></finish-btn>
          </div>
        </div>
      </div>
    </div>
    <shop-code ref="shopCode"></shop-code>
    <sku-dialog :visible.sync="skuDialogVisible" :detailAll="detailAll" :itemId="itemId" :activityType="type"></sku-dialog>

    <!-- 拼团sku -->
    <sku-dialog-group :visible.sync="skuGroupVisible" :detailAll="detailAll" :itemId="itemId"></sku-dialog-group>

    <!-- 积分兑换sku -->
    <sku-dialog-point :visible.sync="skuPointVisible" :detailAll="detailAll" :itemId="itemId" :activityType="type"></sku-dialog-point>

    <!-- 授权弹出框 -->
    <small-login ref="smalllogin"></small-login>
  </div>
</template>

<script>
import Vue from 'vue'
/**
   * @Author: yqe@360shop.cn
   * @Date: 2019-12-04 19:43:18
 * @Last Modified by: zhangmeng
 * @Last Modified time: 2020-07-29 17:54:30
     */
import skuDialog from '../../../components/skuDialog'
import skuDialogGroup from '../../../components/skuDialogGroup' // 拼团sku弹窗
import skuDialogPoint from '../../../components/skuDialogPoint' // 积分sku弹窗
import { scaleGoodsPrice } from '@/utils/index'
import iconBtn from './iconBtn'
import refreshBtn from './refreshBtn'
import finishBtn from './finishBtn'
import ShopCode from '@/components/ShopCode'
import dzYhjyBtn from './dzYhjyBtn'
// import { followPublicCommission } from '@/api/login'
import SmallLogin from '@/components/SmallLogin/smallLogin'
import small from '@/smallapp/small.js'
import { openPage } from '@/utils/utils'


export default Vue.extend({
  name: 'index',
  props: {
    detailAll: {
      type: Object,
      default: () => ({})
    },
    exchange: {
      type: Boolean,
      defaults: false
    },
    itemCourse: {
      type: Boolean,
      defaults: false
    },
    off_shelf_status: {
      type: Number,
      default: 0
    }
  },
  components: {
    iconBtn,
    refreshBtn,
    finishBtn,
    skuDialog,
    skuDialogGroup,
    skuDialogPoint,
    ShopCode,
    SmallLogin,
    dzYhjyBtn
  },
  data() {
    return {
      activityType: '',
      nowTime: '',
      itemId: 0,
      skuDialogVisible: false,
      skuGroupVisible: false,
      skuPointVisible: false,
      type: '' // 加入购物车还是立即购买
    }
  },
  created() {
    // activity:1秒杀，2打折，3砍价，4试用，5预售商品，6订货模式，7周期购，8一口价 ，另外默认
    this.activityType = this.detailAll.activity
    this.nowTime = new Date().getTime()
  },
  methods: {
    JumpName(url, data) {
      // TODO 小程序判断是否登录
        if (!small.checkLogin()) {
          this.$refs.smalllogin.openSmallLoginPop()
          return false
        }
      this.$JumpName(this, url, data)
    },
    linkTo(url) {
      // TODO 小程序判断是否登录
        if (!small.checkLogin()) {
          this.$refs.smalllogin.openSmallLoginPop()
          return false
        }
        openPage(url)
    },

    /**
       * 商品价格 整数放大
       */
    scaleGoodsPriceFn(price, className) {
      return scaleGoodsPrice(price, className)
    },
    /**
       * 打开SKU弹窗
       */
    handleOpenSkuDialog(data, type) {
      if (this.off_shelf_status == 1) {
        return false
      }
      // TODO 小程序判断是否登录
        if (!small.checkLogin()) {
          this.$refs.smalllogin.openSmallLoginPop()
          return false
        }
      const buy_need_fans = this.$store.getters.wxConfig.buy_need_fans
      const that = this
      if (that.detailAll.need_subscribe == 1) {
        that.$refs.shopCode.dialogVisible = true
        return false
      }
      if (buy_need_fans == 1) {
        that.$isFans(() => {
          this.$Error('请先等待商家绑定公众号')
          return false
        }, () => {
          that.$refs.shopCode.dialogVisible = true
          return false
        }, () => {
          // 打开sku弹窗
          that.skuDialogVisible = true
          that.type = type
          that.itemId = Number(data.item_id)
        })
      } else {
        // 打开sku弹窗
        that.skuDialogVisible = true
        that.type = type
        that.itemId = Number(data.item_id)
      }
    },

    /**
       * 打开拼团SKU弹窗
       */
    handleOpenSkuGroup(data) {
      if (this.off_shelf_status == 1) {
        return false
      }

      // TODO 小程序判断是否登录
      if (!small.checkLogin()) {
        this.$refs.smalllogin.openSmallLoginPop()
        return false
      }
      const buy_need_fans = this.$store.getters.wxConfig.buy_need_fans
      const that = this
      if (buy_need_fans == 1) {
        that.$isFans(() => {
          this.$Error('请先等待商家绑定公众号')
          return false
        }, () => {
          that.$refs.shopCode.dialogVisible = true
          return false
        }, () => {
          // 打开sku弹窗
          that.skuGroupVisible = true
          that.itemId = Number(data.item_id)
        })
      } else {
        // 打开sku弹窗
        that.skuGroupVisible = true
        that.itemId = Number(data.item_id)
      }
    },

    // 打开积分兑换sku弹窗
    handleOpenSkuPoint(data, type) {
      if (this.off_shelf_status == 1) {
        return false
      }

      // TODO 小程序判断是否登录
        if (!small.checkLogin()) {
          this.$refs.smalllogin.openSmallLoginPop()
          return false
        }
      this.skuPointVisible = true
      this.type = type
      this.itemId = Number(data.item_id)
    }
  }
})
</script>
<style lang="scss">
.fixed-button{
  .fixed-wrap-item{
    .price-scale {
      font-size:22px;
      color:#fff;
      .num-font{
        font-size:28px;
      }
    }
  }
}
</style>
<style lang="scss">
  @import 'src/styles/variables';
  @import 'src/styles/mixin';

  .fixed-button{
    position: fixed;
    z-index: 1200;
    width: 100%;
    max-width: 750px;
    left:0;
    right: 0;
    margin: 0 auto;
    bottom: 0;
    // background: #fff;
    box-sizing: border-box;
    padding-bottom: constant(safe-area-inset-bottom); /*兼容 IOS<11.2*/
    padding-bottom: env(safe-area-inset-bottom); /*兼容 IOS>11.2*/
    background-color: #fff;
    .undercarriage{
      height:60px;
      background: #000000;
      opacity: 0.5;
      font-size: 28px;
      text-align: center;
      font-weight: 500;
      line-height: 60px;
      color: #FFFFFF;
    }
    .fixed-btn-wrap{
      // border-top: 2px solid #ededed;
      padding: 14px 20px;
      background: #fff;
      &.off-shelf-status{
        .btn-item{
          // 商品已下架
          opacity: 0.5!important;
        }
      }
    .fixed-wrap{
      &-item{
        display: flex;
        flex-direction: row;
        &-btn{
          flex: 1;
          &-app{
            display: flex;
            flex-direction: row;
            align-items: center;
            border-radius: 40px;
            overflow: hidden;
            .btn-item{
              flex: 1;
              height:76px;
              line-height: 76px;
              font-size: 26px;
              // padding: 24px 0;
              text-align: center;
              color: #fff;
              font-weight: bold;
              &.btn-act-end{
                background: #ccc;
              }
            }
          }
        }
      }
      .send-gift-btn{
        @include gradient(right,#FFAE00,#FF8A02);
      }
      // 限时购
      .XianSG{
        .fixed-wrap-item{
          .cart-gra-btn{
            @include gradient(right,#9f76fb,#8b28df)
          }
          .buy-gra-btn{
            @include gradient(right,#f04ddc,#ff2b6f)
          }
        }
      }
      // 拼团
      .PingT{
        .fixed-wrap-item{
          .btn-item{
            display:flex;
            flex-direction: column;
            justify-content: center;
            align-items:center;
            line-height:1;
            font-size:22px;
            .text{
              margin-top:6px;
            }
            &.only{
              line-height: 76px;
              font-size: 28px;
            }
          }
          .single-buy-gra-btn{
            @include gradient(right, #FF1929, #FF4F4F);
          }
        }
      }
      // 砍价
      .KanJ{
        .fixed-wrap-item{
          .kan-btn{
            background: #40B68E;
            &.kan-price{
              display:flex;
              flex-direction:column;
              justify-content: center;
              font-size:18px;
              line-height:1;
              span{
                margin-bottom:8px;
                &:last-child{
                  margin-bottom:0;
                }
              }
            }
          }
        }
      }
      //试用
      .ShiY{
        .fixed-wrap-item{
          .btn-item{
            background-color:#4088E1;
          }
        }
      }
      //预售
      .YuS{
        .fixed-wrap-item{
          .cart-gra-btn{
            display:flex;
            flex-direction:column;
            justify-content: center;
            font-size:22px;
            line-height:1;
            @include gradient(right,#FFAE00,#FF8A02);
            span{
              margin-bottom:8px;
              &:last-child{
                margin-bottom:0;
              }
            }
          }
        }
      }
      // 周期购
      .ZhouQG{
        .fixed-wrap-item{
          .zhouq-btn{
            @include gradient(right,#FF3E7E,#FF285B);
          }
        }
      }
    }
    }
  }
</style>
